<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.ok{
				color: green;
			}
			.error{
				color: red;
			}
		</style>
	</head>
	<body>
		名字：<input type="text" id="name" onblur="clickName()" /><span id="spanchange"></span><br>
		
		邮箱：<input type="text" id="email" onblur="clickEmail()" /><span id="emailChange"></span>
		
		<script type="text/javascript" src="js/jquery.min.js" charset="utf-8"></script>
		<script type="text/javascript">
			function clickName(){
				var name = document.getElementById('name').value;
				var nameSpan = document.getElementById('spanchange');
				var reg = /^\w{5,10}$/;
				if (reg.test(name)) {
					
					$.post('${pageContext.request.contextPath}/ajax',
							{'name' : name},
							function(jsonObj){
								if(jsonObj.isExist){
									$('#spanchange').text('该用户名已存在');
									$('#spanchange').attr('class', 'error');
								}else{
									$('#spanchange').text('√');
									$('#spanchange').attr('class', 'ok');
								}
							},
							'json'
								
					)
				} 
				else{
					nameSpan.className = 'error';
					nameSpan.innerText = '5-10位字母、数字、下划线';
				}
			}
			function clickEmail(){
				var email = document.getElementById('email').value;
				var emailSpan = document.getElementById('emailChange');
				var reg = /^\w+@[a-zA-Z0-9]+\.com/;
				if (reg.test(email)) {
					emailSpan.className = 'ok';
					emailSpan.innerText = '√';
				} else{
					emailSpan.className = 'error';
					emailSpan.innerText = '必须符合邮箱的格式';
				}
			}
		</script>
	</body>
</html>
